<template>
  <div class="List" ref="SearchListRef" v-if="list.length">
    <div class="searchList">
      <li
        v-for="item in list"
        :key="item.id"
        @click="
          $router.push(`/archives/detail/${item.id}`), $emit('headleSearchlist')
        "
      >
        {{ item.title }}
      </li>
    </div>
  </div>
  <div v-else class="item">暂无数据</div>
</template>

<script>
import BScroll from "better-scroll";
export default {
  props: ["list"],
  mounted() {
    this.$nextTick(() => {
      this.bs = new BScroll(this.$refs.SearchListRef, {
        scrollY: true,
        click: true,
        // observeDOM: true
      });
    });
  },
};
</script>

<style scoped lang="scss">
.List {
  max-height: 300px;
  overflow: hidden;
  .searchList {
    line-height: 50px;
    li {
      padding-left: 10px;
    }
  }
}
li:hover {
  background: var(--comment-editor-border-color);
}
.item {
  text-align: center;
}
</style>
